import React, { useState } from "react";
import "./style.scss";
import { Button } from "antd-mobile";

const Cal = ({ onHandleOk }) => {
  const [startTime, setStartTime] = useState("");
  const [endTime, setEndTime] = useState("");
  const ok = () => {
    console.log(startTime, endTime);
    onHandleOk({ startTime, endTime })
  };
  return (
    <div className="cal">
      <div className="content">
        <h3>时间选择</h3>

        <div style={{ margin: "20px 0" }}>
          <input
            type="datetime-local"
            value={startTime}
            onChange={(e) => setStartTime(e.target.value)}
          />
          -
          <input
            type="datetime-local"
            value={endTime}
            onChange={(e) => setEndTime(e.target.value)}
          />
        </div>

        <Button color="primary" block onClick={() => ok()}>
          确定
        </Button>
      </div>
    </div>
  );
};

export default Cal;
